/*
 * @Description: 订单列表-包车
 * @Author: ziwei.ma
 * @Date: 2019-07-23 14:03:03
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-29 15:52:19
 */

<template>
  <div id="app">
    <scroll
      class="orderList_wrap"
      ref="scroll"
      :useBody="useBody"
      :getListData="getListDataByScroll"
      :up="up"
      v-show="showType===1"
    >
      <template v-if="!isNoData">
        <order-item
          v-for="(item,index) in bcOrderList"
          :item="item"
          :key="index"
          @afreshState="afreshState"
        ></order-item>
      </template>
      <!-- 无数据 -->
      <no-data
        v-else
        :imgSrc="require('./assets/nodata_order.png')"
        text="没有相关订单"
      ></no-data>
    </scroll>

    <!-- 无网络 -->
    <net-error
      v-show="showType===0"
      @click.native="afreshData"
    ></net-error>
  </div>
</template>

<script>
import { XBScroll } from 'vue-xb-ui-depot'
import OrderItemVue from './components/OrderItem.vue'
import { getBCOrderList, getGlobals } from './api/api'
import NetErrorVue from '../../components/NetError'
import NoDataVue from '../../components/NoData'
const SHOW_DATA = 1 // 有数据
const NET_ERROR = 0 // 无网络
export default {
  components: {
    'order-item': OrderItemVue,
    'scroll': XBScroll,
    'no-data': NoDataVue,
    'net-error': NetErrorVue
  },
  data() {
    return {
      bcOrderList: [],
      // 是否使用body作为滑动容器
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      },
      showType: 1,
      isNoData: false
    }
  },
  mounted() {
    // 获取全局配置信息加入到本地缓存
    getGlobals().then(res => {
      let BCglobals = res
      localStorage.setItem('BCglobals', JSON.stringify(BCglobals))
    })
    this.addEvent()
  },
  methods: {
    getListDataByScroll(pageIndex, pageCapacity) {
      return getBCOrderList(pageIndex, pageCapacity).then(res => {
        if (res.list.length === 0) {
          this.isNoData = true
          return { length: pageCapacity, count: 1 }
        } else {
          this.showType = SHOW_DATA
          this.bcOrderList = pageIndex === 1 ? res.list : this.bcOrderList.concat(res.list)
          return { length: pageCapacity, count: res.count }
        }
      }).catch(err => {
        if (err.error.code === 'ECONNABORTED') {
          this.showType = NET_ERROR
        }
        return { length: pageCapacity, count: 1 }
      })
    },
    // 点击无网络页面重新获取数据
    afreshData() {
      this.getListDataByScroll()
    },
    // 进项操作成功后刷新
    afreshState() {
      this.reset()
      this.$refs.scroll.mescroll.resetUpScroll()
      this.$EventBus.$emit('afreshState')
    },
    // 重置数据
    reset() {
      this.bcOrderList = []
      this.showType = SHOW_DATA
    },
    addEvent() {
      window.onBack = msg => {
        console.log('~~~~~~~~onBack~~~~~~~~~~')
        let data = JSON.parse(msg)
        if (data.tagRefresh) {
          this.afreshState()
        }
      }
      // window.onResume = () => {
      //   console.log('~~~~~~~~onResume~~~~~~~~~~')
      //   this.afreshState()
      // }
    }
  }
}
</script>

<style>
html,
body,
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #f2f5f6;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.font_small {
  font-size: 10px; /*no*/
}
.orderList_wrap {
  padding: 32px;
  box-sizing: border-box;
}
</style>
